<div class="formDesigner fd-page fd-page-navigate">
    <farris-splitter class="d-flex fd-page-content f-component-splitter">
        <farris-splitter-pane class="px-0 f-component-splitter-pane border-top fd-page-content-nav"
            style="width:260px;z-index:790;" [rzMinWidth]="200" ngResizable [rzHandles]="'e'" [rzMaxWidth]="450">
            <div class="pane-content">
                <div class="leftBar border-right d-flex flex-column">
                    <div class="tab-panel">
                        <ul class="tab-container">
                            <li class="left-tab-item" [class.checked]="leftTabActive==='controlTree'"
                                (click)="changeSideBarTabTo('controlTree')">
                                <a class="tab-label">控件树</a>
                            </li>
                            <li class="left-tab-item" [class.checked]="leftTabActive==='controllist'"
                                (click)="changeSideBarTabTo('controllist')">
                                <a class="tab-label">工具箱</a>
                            </li>

                            <li class="left-tab-item" [class.checked]="leftTabActive==='schemaTree'"
                                (click)="changeSideBarTabTo('schemaTree')">
                                <a class="tab-label">实体树</a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content flex-fill">
                        <div [hidden]="leftTabActive !=='controlTree'" class="h-100 f-utils-overflow-auto">
                            <control-tree [domJson]="domJson" #controlTree
                                (changeControlTreeNode)="changeControlTreeNode($event)"
                                [beforeShowContextMenu]="beforeShowContextMenu">
                            </control-tree>
                        </div>
                        <div [hidden]="leftTabActive !=='controllist'" class="h-100 f-utils-overflow-auto">
                            <control-box #controlBox [designerBuilder]="designBuilder"></control-box>
                        </div>

                        <div [hidden]="leftTabActive !=='schemaTree'" class="h-100">
                            <schema-tree #schemaTree [designerBuilder]="designBuilder"> </schema-tree>
                        </div>
                    </div>

                </div>
            </div>
        </farris-splitter-pane>

        <div class="fd-page-content-main f-component-splitter-pane">
            <div class="pane-content">

                <!-- 控件视图-->
                <div class="d-block w-100 h-100">
                    <div class="mainPanel w-100 h-100 d-flex flex-column">
                        <div class="d-flex h-100" style="overflow: hidden;">
                            <farris-splitter style="height: inherit;"
                                [style.display]="bottomTabActive==='formDesigner'?'flex':'none'"
                                class="fd-page-content f-component-splitter">
                                <!-- 可视化区域-->
                                <div
                                    class="flex-fill px-0 f-component-splitter-pane border-top f-utils-overflow-hidden">
                                    <div class="editorDiv flex-fill h-100">
                                        <div class="editorPanel d-flex flex-fill flex-column PC"
                                            [f-area-response]="true" [autoResponse]="true">
                                        </div>
                                    </div>
                                </div>
                                <!-- 属性面板 updating-->
                                <div [style.width]="propertyPanelWidth" style="z-index:850;"
                                    class="fd-page-content-nav f-component-splitter-pane propertyResizeLeft h-100"
                                    [ngResizable]="propertyPanelResizeable" [rzHandles]="'w'" [rzMinWidth]="265"
                                    [rzMaxWidth]="450">
                                    <app-property-panel class="flex-fill" [propertyConfig]="propertyConfig"
                                        [propertyData]="propertyData" [showCloseBtn]="false" [enableSearch]="true"
                                        [enableChangeMode]="true" [selectedTabId]="selectedPropertyTabId"
                                        isWhiteTheme="true" (selectedTabChanged)="onSelectedPropertyTabChanged($event)"
                                        (propertyChanged)="onPropertyChanged($event)"
                                        (submitModal)="onPropertyModalChanged($event)"
                                        (showModeChange)="onPropertyPanelShowModelChange($event)"
                                        [dynamicControl]="true">
                                    </app-property-panel>
                                </div>
                            </farris-splitter>

                            <div class="designerCodePanel flex-fill position-relative"
                                *ngIf="bottomTabActive==='codeEditor'">
                                <angular-monaco-editor class="customMonacoEditor" [options]="{}"
                                    [(ngModel)]="monacoCode" (onInit)="onMonacoInit($event)"></angular-monaco-editor>
                            </div>

                            <div class="classCodePanel flex-fill" *ngIf="bottomTabActive==='classEditor'">
                                <class-editor #classEditorComponent></class-editor>
                            </div>

                        </div>


                        <div class="tab-panel" style="z-index:850;">
                            <div class="tab-container">
                                <div class="bottom-tab-item ml-3" [class.checked]="bottomTabActive==='formDesigner'"
                                    (click)="changeBottomBar('formDesigner')">
                                    <a class="tab-label">可视化设计器</a>
                                </div>
                                <div class="bottom-tab-item" [class.checked]="bottomTabActive==='codeEditor'"
                                    (click)="changeBottomBar('codeEditor')">
                                    <a class="tab-label">代码编辑器</a>
                                </div>
                                <div class="bottom-tab-item" [class.checked]="bottomTabActive==='classEditor'"
                                    (click)="changeBottomBar('classEditor')">
                                    <a class="tab-label">自定义样式</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </farris-splitter>

</div>